$breakpoints: (
  'ipad': (768px, 990px),
  'desktop': (991px, 1366px),
  'pc': 1367px,
  'mobile': 768px,
);

@mixin respondTo($breakname) {
	
  // 确保从映射中获取的是一个具体的断点值
  $breakpoint: map-get($breakpoints, $breakname);

  // 检查$breakpoint是否是一个列表。
  @if type-of($breakpoint) == list {
    // 获取范围的最小宽度和最大宽度
    $min-width: nth($breakpoint, 1);
    $max-width: nth($breakpoint, 2);

    // 创建媒体查询
    @media (min-width: $min-width) and (max-width: $max-width) {
      @content; // 这将包含调用此 mixin 时在其内部编写的 CSS
    }
  } @else {
    // 处理单值断点
		@if $breakname == 'pc' {
			@media (min-width: $breakpoint) {
				@content;
			}
		}	@else if $breakname == 'mobile' {
			// 判断是否是mobile
			@media (max-width: $breakpoint) {
				@content;
			}
		}
  }
}

